<!DOCTYPE html>
<html>
	<head>
		<title>SimpleBlog Manager</title>
		<link rel="stylesheet" type="text/css" href="css/adminstyle.css" />
		<script type="text/javascript" src="js/script.js"></script>
		<!--[if IE]>
		<script>
			makeIESupportHTML5();
		</script>
		<![endif]-->
		<script>
			ajax('http://inkisapi.appspot.com/blog/posts', 'GET', null, function(xhr){
				jsonData = eval('(' + xhr.responseText + ')');
				var output = "<table><tr><td>Tittle</td><td>Content</td></tr>";
				for (i=0; i<jsonData.length; i++){
					output += "<tr>";
					output += "<td>"+jsonData[i].tittle+"</td>";
					output += "<td>Content hidden</td>";
					output += "</tr";
				}
				output += "</table>";
				document.getElementById('items-list').innerHTML = output;
			});
		</script>
	</head>
	<body>
		<header>
			<p class="right">Login</p>
		</header>
		<nav>
			<ul>
				<li><a href="#">Dashboard</a></li>
				<li><a href="#">All items</a></li>
				<li><a href="#">Setting</a></li>
			</ul>
		</nav>
		<section>
			<header>All items</header>
			<p id="items-list">Null</p>
			<form>
				<legend>
					POST /item/article (/item/section)
				</legend>
				<fieldset>
					<label>ID</label>
					<br />
					<input type="text" id="id" value="001"/>
					<br/>
					<label>Meta</label>
					<br />
					<input type="text" id="meta" value="12 Dec 2012"/>
					<br/>
					<label>Tittle</label>
					<br />
					<input type="text" id="title" value="Javascript Best Pratice"/>
					<br/>
					<label>HTML content</label>
					<br />
					<textarea id="html">HTML tags</textarea>
					<br/>
					<label>Query</label>
					<br />
					<input type="text" id="query" value="home"/>
					<br/>
					<button onclick="addItem()">
						Add Item
					</button>
					<br/>
					<button onclick="updateItem()">
						Update Item
					</button>
					<br/>
				</fieldset>
			</form>
		</section>
		<footer>Simple Blog Admin</footer>
	</body>
</html>